@charset "UTF-8";
/*コスメ送料無料インフォメーション表示8/18まで　*/
/*
.ifm {
    display: none;
}
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
div#cosme_coupon {
  display: block;
}

/* --------------------
フォントのインポート
-------------------- */
/* --------------------
PC基本 media制限なし
-------------------- */
/* --------------------
全体・リセット
-------------------- */
#eventTopFreeArea1 {
  margin-bottom: 32px;
}

#eventTopFreeArea2 {
  padding: 32px 0 40px;
}

.cosme {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #555;
}

.p-category-top__body *,
.p-category-top__body *::before,
.p-category-top__body *::after {
  box-sizing: border-box;
  font-family: "Arial", YuGothic, "Yu Gothic", sans-serif;
}

.cosme a,
.cosme a:visited {
  color: #555;
}

.cosme a:hover {
  text-decoration: none;
}

.cosme button {
  border: 0;
}

.cosme img {
  max-width: 100%;
  height: auto;
}

.cosme a img:hover {
  opacity: 1;
}

/* --------------------
  ページ上部インフォメーション
  -------------------- */
.pagetop-information:nth-child(odd) {
  background-color: #eff9fa;
}

.pagetop-information:nth-child(even) {
  background-color: #fffaee;
}

.pagetop-information__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  gap: 8px 20px;
}

.pagetop-information__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.pagetop-information__large {
  margin: 0 4px;
  font-size: 32px;
  color: #d20d60;
}

.pagetop-information__button {
  font-weight: 700;
  font-size: 18px;
  background: #fff;
  padding: 8px 40px 8px 24px;
  border-radius: 999px;
  background: #fff url("/g_images/freearea/portal/ico_arrow-right-red.svg") no-repeat top 50% right 16px/8px;
}

/* 見出し */
.section-heading {
  margin-bottom: 24px;
  color: #000;
  text-align: center;
  font-weight: 400;
  line-height: 1.3;
}

.section-heading__en {
  font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
  font-size: 32px;
}

.section-heading__ja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.section-heading__ja::before,
.section-heading__ja::after {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: #000;
}

/* ----------------------
  タグ
  -------------------- */
.cosme .tag,
.cosme .tag:visited {
  display: block;
  padding: 8px;
  font-size: 14px;
  line-height: 1;
  border: solid 1px #e0e0e0;
  transition: 0.2s;
}

.cosme .tag:hover {
  background-color: #f7f7f7;
}

/* ----------------------
  商品リスト_pc
  -------------------- */
.cosme .product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0 10%;
  margin: 0 auto -48px;
}

.cosme .product-item {
  width: calc((100% - 96px) / 3);
  margin: 0 48px 48px 0;
}

.cosme .product-item:nth-child(3n) {
  margin-right: 0;
}

.cosme .product-item__link {
  transition: 0.2s;
}

.cosme .product-item__link:hover {
  opacity: 0.6;
}

/* 商品画像 */
.cosme .product-item__image {
  margin-bottom: 16px;
}

.cosme .product-item__image img {
  width: 100%;
}

/* 商品 詳細(deetail) */
.cosme .product-item__head {
  margin-bottom: 12px;
  padding-left: 16px;
  border-left: solid 1px #e0e0e0;
  font-weight: 600;
}

.cosme .product-item__brand {
  /* margin-bottom: 2px; */
  margin-bottom: 10px;
  font-size: 12px;
}

.cosme .product-item__name {
  font-size: 18px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* cosmeのみ */
}

.cosme .product-item-price:not(:last-child) {
  margin-bottom: 12px;
}

.cosme .product-item__text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.cosme .product-item__text--red {
  color: #990a03;
}

/* ブランドごと ロゴ画像サイズ調整 */
.cosme .product-item__brand img {
  height: 24px;
}

.cosme .product-item__brand img[alt*=綾花] {
  height: 56px;
}

.cosme .product-item__brand img[alt*=アユーラ] {
  height: 26px;
}

.cosme .product-item__brand img[alt*=イプサ] {
  height: 44px;
}

.cosme .product-item__brand img[alt*=イヴサンローラン] {
  height: 24px;
}

.cosme .product-item__brand img[alt*=エスト] {
  height: 20px;
}

.cosme .product-item__brand img[alt*=エピステーム] {
  height: 24px;
}

.cosme .product-item__brand img[alt*=カネボウ] {
  height: 19px;
}

.cosme .product-item__brand img[alt*=クラランス] {
  height: 24px;
}

.cosme .product-item__brand img[alt*=コウ] {
  height: 60px;
}

.cosme .product-item__brand img[alt*=シスレー] {
  height: 30px;
}

.cosme .product-item__brand img[alt*=資生堂] {
  height: 30px;
}

.cosme .product-item__brand img[alt*="ジミー チュウ"] {
  height: 19px;
}

.cosme .product-item__brand img[alt*=ジョンマスターオーガニック] {
  height: 54px;
}

.cosme .product-item__brand img[alt*="シュウ ウエムラ"] {
  height: 24px;
}

.cosme .product-item__brand img[alt*=スタイルテーブル] {
  height: 31px;
}

.cosme .product-item__brand img[alt*=スパセイロン] {
  height: 65px;
}

.cosme .product-item__brand img[alt*=ルナソル] {
  height: 18px;
}

.cosme .product-item__brand img[alt*=ちふれ] {
  height: 30px;
}

.cosme .product-item__brand img[alt*=ドクターシーラボ] {
  height: 54px;
}

.cosme .product-item__brand img[alt*=ドルチェ＆ガッパーナ] {
  height: 28px;
}

.cosme .product-item__brand img[alt*=ハイネット] {
  height: 32px;
}

.cosme .product-item__brand img[alt*=ハーバー] {
  height: 44px;
}

.cosme .product-item__brand img[alt*=ヒカリミライ] {
  height: 60px;
}

.cosme .product-item__brand img[alt*=ベアミネラル] {
  height: 18px;
}

.cosme .product-item__brand img[alt*=ヘレナルビンスタイン] {
  height: 40px;
}

.cosme .product-item__brand img[alt*=ポーネット] {
  height: 58px;
}

.cosme .product-item__brand img[alt*="ミキモト コスメティックス"] {
  height: 38px;
}

.cosme .product-item__brand img[alt*=山田養蜂場＜化粧品＞] {
  height: 46px;
}

.cosme .product-item__brand img[alt*=ランコム] {
  height: 30px;
}

.cosme .product-item__brand img[alt*=ランバン] {
  height: 26px;
}

.cosme .product-item-price {
  margin: 5px 0 0 20px;
  font-size: 22px;
  line-height: 1;
}

.cosme .product-item-price__small {
  margin-left: 4px;
  font-size: 12px;
}

/* 商品_タグ */
.cosme .product-item__tags {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0 -8px;
}

.cosme .product-item__tag {
  margin: 0 8px 8px 0;
  padding: 6px 12px 4px;
  background: #2c2c2c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* ----------------------
  丸画像リスト
  -------------------- */
.cosme .circle-image-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10%;
  margin: 0 auto -3px;
}

.cosme .circle-image-list-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 3px 3px 0;
}

.cosme .circle-image-list-item:nth-child(3n) {
  margin-right: 0;
}

.cosme .circle-image-list-item::after {
  content: "";
  display: block;
  width: 1px;
  height: 66%;
  margin: 0 1px;
  background-color: #e0e0e0;
}

.cosme .circle-image-list-item__inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 8px 4px 4px;
  border-bottom: solid 1px #e0e0e0;
  transition: 0.2s;
}

.cosme .circle-image-list-item__inner:hover {
  background-color: #f7f7f7;
  cursor: pointer;
}

.cosme .circle-image-list-item__image {
  width: 52px;
  height: 52px;
  margin-right: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.cosme .circle-image-list-item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cosme .circle-image-list-item--limitation .circle-image-list-item__image img {
  -o-object-position: bottom 0 left 0;
     object-position: bottom 0 left 0;
}

.cosme .circle-image-list-item__text {
  flex: 1;
}

.cosme .circle-image-list-item__icon {
  margin-left: 12px;
}

/* --------------------
  ボタン
  -------------------- */
/* ナビゲーションボタン */
/* 商品画像ボタン */
.bgimage-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 8px 12px;
  overflow: hidden;
}

.bgimage-btn__text {
  color: #fff;
}

.bgimage-btn__bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.bgimage-btn__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: 0.2s;
}

.bgimage-btn:hover .bgimage-btn__bg::after {
  background: rgba(0, 0, 0, 0.3);
}

.bgimage-btn__bg img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 限定品はこちらボタン */
.cosme .btn-limited {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 96px;
  overflow-y: hidden;
  transition: 0.2s;
  background: url("/g_images/freearea/cosme/bg_gold.jpg") top 0 left 0/contain;
}

.cosme .btn-limited:hover {
  opacity: 0.6;
}

.cosme .btn-limited__image {
  flex: 1;
  height: 100%;
}

.cosme .btn-limited__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left 0 bottom 0;
     object-position: left 0 bottom 0;
}

.cosme .btn-limited__text-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 70%;
  height: 100%;
  padding-right: 24px;
  background: #2c2c2c;
}

.cosme .btn-limited__text-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transform: translateX(-30%) skew(-45deg);
  width: 50%;
  height: 100%;
  background: #2c2c2c;
}

.cosme .btn-limited-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 28px;
  letter-spacing: 0.08em;
  color: #fff;
  font-weight: 700;
}

.cosme .btn-limited-text__small {
  font-size: 14px;
}

.cosme .btn-limited-text__arrow img {
  width: 80px;
  height: auto;
}

/* --------------------
  矢印付きリンクテキスト
  -------------------- */
.cosme .arrow-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.cosme .arrow-link:hover {
  opacity: 0.6;
  text-decoration: none;
}

.cosme .arrow-link__icon {
  margin-left: 8px;
}

/* --------------------
  注目ワード
  -------------------- */
.cosme .keywords {
  display: flex;
  margin-bottom: 12px;
}

.cosme .keywords__heading {
  margin-right: 16px;
  padding-top: 7px;
  font-size: 18px;
  color: #392200;
  font-weight: 700;
  white-space: nowrap;
}

.cosme .keyword-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------
  お知らせ
  -------------------- */
/* お知らせ欄 共通 */
.cosme .info-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 14px;
}

.cosme .info-item-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.cosme .info-item-text__large {
  font-size: 24px;
  line-height: 1;
}

.cosme .info-item__notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px 0;
}

.cosme .info-item-text--note {
  font-size: 12px;
  font-weight: 400;
}

/* ポイントいつでも5% */
.cosme .info-item--point {
  background-color: #fffaee;
}

.cosme .info-item--point .info-item-text {
  font-size: 16px;
}

.cosme .info-item--point .info-item-text__large {
  margin-left: 4px;
  font-size: 28px;
  color: #990a03;
  transform: translateY(2px);
}

.cosme .info-item--point .info-item-text__strong {
  color: #990a03;
}

/* 送料無料 */
.cosme .info-list {
  margin-bottom: 16px;
}

.cosme .info-item--postage {
  background-color: #000;
}

.cosme .info-item--postage .info-item-text {
  color: #fff;
}

.cosme .info-item--postage .info-item-text:first-child {
  margin-right: 4px;
}

.cosme .info-item--postage .info-item-text__large {
  margin: 0 4px;
  transform: translateY(1px);
}

/* クーポン */
.cosme .info-item--coupon {
  background-color: #fff5f5;
}

.cosme .info-item--coupon .info-item-text__color {
  color: #990a03;
}

/* --------------------
  タイトル
  -------------------- */
.cosme .title {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.cosme .title__text {
  font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
  font-size: 7rem;
  line-height: 1;
}

/* --------------------
  メインビジュアル
  -------------------- */
.cosme .mainvisual {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.cosme .mv-slider-item__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s;
}

.cosme .mv-slider-item__link:hover {
  opacity: 0.6;
}

.cosme .mv-slider-item__link img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* sliderPro */
.cosme .sp-button {
  width: 12px;
  height: 12px;
  border: 0;
  background-color: #e0e0e0;
}

.cosme .sp-selected-button {
  background-color: #828282;
}

/* --------------------
  キーワード検索
  -------------------- */
.search {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.search-form {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 10%;
}
.search-form__input {
  flex: 1 1 auto;
  height: 56px;
  padding: 0 24px;
  border: solid 1px #333;
  font-family: YuGothic, "Yu Gothic", sans-serif;
}
.search-form__input::-moz-placeholder {
  color: #828282;
}
.search-form__input::placeholder {
  color: #828282;
}

.search-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  background-color: #333;
  font-family: YuGothic, "Yu Gothic", sans-serif;
  border: 0;
  transition: background-color 0.2s;
}
.search-form-submit:hover {
  cursor: pointer;
  background-color: #555;
}
.search-form-submit__text {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.search-form-submit__icon {
  width: 20px;
  height: 20px;
}

/* --------------------
  ブランド一覧はこちら、ピックアップブランド
  -------------------- */
.nav-brand {
  margin: 30px 0 40px;
}

.nav-brand-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  padding: 20px 10px 25px;
  border: #333 1px solid;
  border-width: 1px 0;
}
.nav-brand-list__item a {
  display: block;
  padding: 10px 0;
  border: #fff 1px solid;
  transition: 0.3s ease;
}
.nav-brand-list__item a:hover {
  transform: scale(1.03);
  border-color: #333;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

a.nav-brand-button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: min(260px, 100%);
  margin: 0 auto;
  padding: 16px 50px 16px 40px;
  transition: 0.3s ease;
  background: #333;
  color: #fff;
}
a.nav-brand-button:hover {
  background: #555;
}
a.nav-brand-button::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  margin: auto 20px auto auto;
  background: url("/g_images/freearea/cosme/ico_arrow-down_white.svg") 50% 50%/auto 100% no-repeat;
  inset: 0;
}

/* --------------------
  ピックアップブランド
  -------------------- */
.cosme .section--pickup-brand {
  margin-bottom: 32px;
}

.cosme .pickupbrand-box {
  padding: 16px;
  background-color: #f7f7f7;
}

.cosme .pickupbrand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
}

.cosme .pickupbrand-item__link {
  transition: 0.2s;
}

.cosme .pickupbrand-item__link:hover {
  opacity: 0.6;
}

/* --------------------
  ナビゲーション
  -------------------- */
.cosme .navigation {
  margin-bottom: 48px;
}

.cosme .navigation__inner {
  display: flex;
  justify-content: center;
}

.cosme .navigation-button-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10%;
  margin-bottom: -4px;
}

.cosme .navigation-button-item {
  display: flex;
  width: calc((100% - 4px) / 2);
  margin: 0 4px 4px 0;
}

.cosme .navigation-button-item:nth-child(even) {
  margin-right: 0;
}

.cosme .navigation-button {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-height: 80px;
  padding: 12px;
  background-color: #f6f6f6;
  transition: 0.2s;
}

.cosme .navigation-button:hover {
  background-color: #e9e9e9;
}

.cosme .navigation-button__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cosme .navigation-button__en {
  font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
  font-size: 24px;
}

.cosme .navigation-button__ja {
  margin-top: 2px;
  font-size: 16px;
  color: #808080;
}

.cosme .navigation-button__icon {
  width: 12px;
  height: 12px;
}

/* --------------------
  新着商品
  -------------------- */
.cosme .section--new {
  margin-bottom: 72px;
}

/* --------------------
  注目トピックス
  -------------------- */
.cosme .section--topics {
  margin-bottom: 72px;
}

.cosme .topics-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cosme .topics-item {
  width: 100%;
  padding: 0 10%;
  margin-bottom: 16px;
}

.cosme .topics-item:last-child {
  margin-bottom: 0;
}

.cosme .topics-item--half {
  width: calc((100% - 16px) / 2);
}

.cosme .topics-item__link {
  transition: 0.2s;
}

.cosme .topics-item__link:hover {
  opacity: 0.6;
}

/* 202404 uv特集 */
.cosme .topics-section--uv {
  margin-top: 48px;
}

.cosme .topics-section--uv .topics-section-heading {
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
}

.cosme .topics-section--uv .topics-section-heading__color {
  color: #00b5d6;
}

.cosme .topics-section--uv .topics-section-lead {
  display: flex;
  justify-content: center;
}

.cosme .topics-section--uv .topics-section-lead__text {
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.6;
}

.cosme .topics-section--uv .topics-section-lead__text .is-sp {
  display: none;
}

.cosme .topics-section-lead {
  margin-bottom: 24px;
}

.cosme .topics-section--uv .topics-section-lead__text::before,
.cosme .topics-section--uv .topics-section-lead__text::after {
  content: "";
  display: block;
  width: 1px;
  height: 48px;
  position: absolute;
  top: 0;
  background: #000;
}

.cosme .topics-section--uv .topics-section-lead__text::before {
  right: 0;
  transform: skew(-40deg) translateX(40px);
}

.cosme .topics-section--uv .topics-section-lead__text::after {
  left: 0;
  transform: skew(-40deg) translateX(-40px);
}

.cosme .uv-block {
  background-image: linear-gradient(-75deg, #ecf5fa 0%, #ecf5fa calc(50% - 48px), #fffef2 calc(50% - 48px));
}

.cosme .uv-block__contents {
  display: flex;
  justify-content: center;
}

.cosme .uv-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 48px 64px;
}

.cosme .uv-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.cosme .uv-section-heading__purpose {
  position: relative;
  z-index: 1;
  margin-right: 4px;
  background: linear-gradient(45deg, #e3e3e3 0%, #a9a9a9 25%, #adadad 50%, #aaa 75%, #797979);
  padding: 8px 24px;
  font-size: 22px;
  color: #000;
  line-height: 1;
  letter-spacing: 0.1em;
}

.cosme .uv-section-heading__purpose::after {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: -1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #fff;
}

.cosme .uv-section .product-list {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.cosme .uv-section .product-item {
  width: calc((100% - 32px) / 2);
}

.cosme .uv-section .product-item:nth-child(2n) {
  margin: 0;
}

.cosme .uv-section .product-item__image {
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.08);
}

/* --------------------
  カテゴリから探す_pc
  -------------------- */
.cosme .section--category {
  margin-bottom: 72px;
}

.cosme .section--category .circle-image-list-item {
  position: relative;
  width: calc((100% - 6px) / 3);
}

.cosme .section--category .circle-image-list-item:nth-child(3n)::after,
.cosme .section--category .circle-image-list-item:last-child::after {
  display: none;
}

.cosme .section--category .circle-image-list-item:last-child:not(:nth-child(3n)) {
  padding-right: 3px;
}

.cosme .section--category .circle-image-list-item__inner {
  position: relative;
}

/* 2階層メニュー_pc */
.cosme .category-childmenu {
  position: absolute;
  opacity: 0;
  top: 100%;
  left: 0;
  z-index: 99999;
  width: calc(300% + 6px);
  padding: 24px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  background: #fff;
  transition: opacity 0.2s;
  pointer-events: none;
}

.cosme .circle-image-list-item:hover .category-childmenu {
  opacity: 1;
  pointer-events: auto;
}

.cosme .section--category .circle-image-list-item:nth-child(3n-1) .category-childmenu {
  left: calc(-100% - 2px);
}

.cosme .section--category .circle-image-list-item:nth-child(3n) .category-childmenu {
  right: 0;
  left: auto;
}

.cosme .category-childmenu-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
}

.cosme .category-childmenu-item__link {
  display: flex;
  height: 100%;
  padding: 4px 8px;
  border-radius: 2px;
  transition: 0.2s;
}

.cosme .category-childmenu-item__link:hover {
  background-color: #f6f6f6;
}

.cosme .category-childmenu-item__link-text {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
}

.cosme .category-childmenu-item__link-text::after {
  content: "";
  display: block;
  width: 12px;
  min-width: 12px;
  height: 12px;
  margin-left: 8px;
  transform: translateY(3px);
  background: url("/g_images/freearea/cosme/ico_arrow-right_black.svg") no-repeat center/contain;
}

/* --------------------
  効果から探す
  -------------------- */
.cosme .section--efficacy {
  margin-bottom: 72px;
}

.cosme .section--efficacy .circle-image-list-item {
  width: calc((100% - 6px) / 3);
}

.cosme .section--efficacy .circle-image-list-item:nth-child(3n) {
  margin-right: 3px;
}

.cosme .section--efficacy .circle-image-list-item:nth-child(3n) {
  margin-right: 0;
}

.cosme .section--efficacy .circle-image-list-item:last-child:not(:nth-child(3n)) {
  padding-right: 3px;
}

.cosme .section--efficacy .circle-image-list-item:nth-child(3n)::after,
.cosme .section--efficacy .circle-image-list-item:last-child::after {
  display: none;
}

/* --------------------
ピックアップ商品
-------------------- */
.cosme .section--pickup-items {
  margin-bottom: 72px;
}

/* --------------------
取り扱いブランド一覧_pc
-------------------- */
.cosme .section--brand-list {
  margin-bottom: 72px;
}

.brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr));
  gap: 10px;
  margin: 0 auto;
  padding: 0 10%;
}

.brand-item__link {
  display: block;
  height: 100%;
  padding: 10px;
  transition: 0.3s ease;
  border: #fff 1px solid;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.brand-item__link:hover {
  border-color: #333;
}
.brand-item__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  transition: background-color 0.2s;
  background: #fff;
  aspect-ratio: 16/9;
}
.brand-item__logo img {
  width: 100%;
  height: 100%;
  padding: 15px;
  -o-object-fit: contain;
     object-fit: contain;
}
.brand-item__text {
  margin-top: 8px;
  font-size: 12px !important;
  text-align: center;
}
.brand-item__new {
  text-align: inline;
  margin-left: 4px;
  color: #990a03;
}

/* --------------------
ページ下部リスト
-------------------- */
.cosme .footer-lists-section:not(:last-child) {
  margin-bottom: 40px;
}

.cosme .footer-lists-section__heading {
  width: 100%;
  max-width: 80%;
  margin: 0 auto 24px;
  font-size: 18px;
  font-weight: 600;
}

.cosme .footer-lists__wrap {
  display: flex;
  gap: 0 24px;
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
}

.cosme .footer-lists__column {
  display: flex;
  flex-direction: column;
  width: calc((100% - 48px) / 3);
  margin-bottom: -32px;
}

.cosme .footer-list-block {
  margin-bottom: 32px;
}

.cosme .footer-list-block__heading {
  margin-bottom: 12px;
  padding: 8px;
  font-weight: 700;
  background-color: #f6f6f6;
}

.cosme .footer-list-item:not(:last-child) {
  margin-bottom: 12px;
}

.cosme .footer-list-item__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
  font-size: 14px;
  transition: 0.2s;
}

.cosme .footer-list-item__link:hover {
  background-color: #f7f7f7;
}

.cosme .footer-list-item__link::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("/g_images/freearea/cosme/ico_arrow-right_black.svg") no-repeat center/contain;
}

/* --------------------
コスメランキング js改変あり
-------------------- */
.cosmetop-ranking {
  max-width: 1168px;
  margin: 6.2rem auto 0;
  padding: 0 calc(10% - 1.6rem);
}
.cosmetop-ranking__more {
  display: flex;
  align-items: center;
  padding: 1.2rem 3.5rem 1rem 2rem;
  transition: 0.3s ease;
  background: #f6f6f6 url("/g_images/freearea/cosme/ico_arrow-right_black.svg") no-repeat top 50% right 1rem/1.5rem auto;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.1;
}
.cosmetop-ranking__more:hover {
  background-color: #e9e9e9;
  text-decoration: none;
}
.cosmetop-ranking__area {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
}
.cosmetop-ranking__brand, .cosmetop-ranking__category {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.2rem 4rem 1.2rem 3rem;
  transition: 0.3s ease;
  background: #333 url("/g_images/freearea/cosme/ico_arrow-right_white.svg") no-repeat top 50% right 2rem/2.2rem auto;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.1;
  text-align: center;
}
.cosmetop-ranking__brand:hover, .cosmetop-ranking__category:hover {
  background-color: #555;
}
.cosmetop-ranking__brand b, .cosmetop-ranking__category b {
  padding: 0.3rem 1.5rem;
  border: #fff 1px solid;
  background: #fff;
  color: #333;
}

.cosmetop-ranking__brand b {
  background: transparent;
  color: #fff;
}
.cosmetop-ranking .p-category-top__ranking__inner {
  position: relative;
}
.cosmetop-ranking .p-category-top__ranking__body {
  padding: 0;
  background: none;
}
.cosmetop-ranking .c-heading-h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 2.5rem;
}
.cosmetop-ranking .c-heading-h4__text a:hover {
  text-decoration: underline;
}
.cosmetop-ranking .p-category-top__heading__link {
  margin: 0 0 0 auto !important;
}
.cosmetop-ranking .p-category-top__ranking-content__body {
  display: grid;
  position: relative;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px 20px;
  padding: 0;
  counter-reset: rankingnum;
}
.cosmetop-ranking .goods {
  position: relative;
  width: auto;
  margin: 0 !important;
  padding-bottom: 1rem;
  transition: 0.3s ease;
}
.cosmetop-ranking .goods:hover {
  background-color: #f6f6f6;
}
.cosmetop-ranking .c-goods-info__icon-new {
  right: 0;
  left: auto;
}
.cosmetop-ranking .p-category-top__ranking-icon-wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 6rem;
  height: 6rem;
  margin: 0;
  background: #fff;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
          clip-path: polygon(0 0, 0 100%, 100% 0);
}
.cosmetop-ranking .p-category-top__ranking-icon-wrap::before {
  content: counter(rankingnum);
  display: flex;
  height: 100%;
  padding-left: 0.5rem;
  font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
  font-size: 3rem;
  line-height: 1;
  counter-increment: rankingnum;
}
.cosmetop-ranking .p-category-top__ranking-icon-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 141.4%;
  height: 1px;
  background-color: #333;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}
.cosmetop-ranking .p-category-top__ranking-icon-wrap img {
  display: none;
}
.cosmetop-ranking .c-goods-info__image {
  margin-bottom: 18px;
  padding: 15px;
  background: #f6f6f6;
}
.cosmetop-ranking .c-goods-info__image img {
  transition: 0.3s ease;
}
.goods:hover .c-goods-info__image img {
  transform: scale(1.1);
}

.cosmetop-ranking .c-goods-info__text {
  padding: 0 15px;
}
.cosmetop-ranking .c-goods-info__name {
  margin-bottom: 1rem;
}
.cosmetop-ranking .c-goods-info__price {
  display: flex;
  align-items: baseline;
  line-height: 1.1;
}
.cosmetop-ranking .c-goods-info__price span:not(.notNumber) {
  font-size: 2.2rem;
  font-weight: normal;
}
.cosmetop-ranking .c-goods-info__price span:not(.notNumber) .yen {
  margin-left: 3px;
  font-size: 1.4rem;
}
.cosmetop-ranking .p-category-top__ranking__ranking-content-foot input {
  transition: 0.3s ease;
  background: #333;
  color: #fff;
}
.cosmetop-ranking .p-category-top__ranking__ranking-content-foot input:hover {
  background: #555;
}

.csmifm {
  color: black;
  padding: 0 5px 5px 5px;
  text-align: center;
}

.csmtxt_0 {
  display: none;
}

.csmtxt_1 {
  font-size: 2.5rem;
}

.csmtxt_2 {
  font-size: 4rem;
  color: red;
  font-weight: bold;
}

.csmtxt_3 {
  font-size: 2.3rem;
  color: white;
  background: #de7b7b;
  padding: 3px;
  margin: 0 0 0 7px;
  border-radius: 10px;
}

.csmtxt_4 {
  font-size: 1.5rem;
}

.mkr {
  font-weight: bold;
  background: linear-gradient(transparent 70%, #ffdcdc 30%);
}

.point_cs {
  margin-top: 10px;
}

.point_cs a {
  font-size: 14px;
  transition: 0.5s;
}

.point_cs a:hover {
  color: blue;
  text-decoration: underline;
}

/*  東武カードポイント還元率  */
.newcard_contents {
  padding: 40px 80px;
  margin: 40px calc(50% - 50vw);
  width: 100vw;
  background-color: #fdf7ef;
}
.newcard-ttl {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.table-scroll-note {
  display: none;
}

.newcard-wrapper {
  text-align: center;
  margin: 14px auto 0;
  display: flex;
  justify-content: center;
}

.newcard {
  margin-bottom: 20px;
}

.newcard th, 
.newcard td {
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    width: 166px;
    height: 75px;
}

.newcard .newcard-item th {
  background: #F5F5F5;
}

.newcard .standard th .u-font-weight-normal {
  font-size: 1.2rem;
}

.newcard .standard th {
  background: #8AA6B6;
  color: #fff;    
}

.newcard .standard td {
  background: #fff;
}

.newcard .gold th {
  background: #D6B76B;
  color: #fff;    
}

.newcard .gold td {
  background: #fff;
}

.newcard .vip th {
  background: #363636;
  color: #fff;    
}

.newcard .vip td {
  background: #fff;
}
.newcard-img {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}
.newcard-img .cardcopy {
  font-size: .9rem;
  margin-top: .4rem;
  line-height: 1;
}
.newcard-img img:first-child {
  margin-top: 0;
}
.text_newcard {
  font-size: 15px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .newcard-wrapper {
    overflow-x: scroll;
    justify-content: flex-start;
    margin: 1vw auto 0;
  }
  .newcard-img .cardcopy {
    margin-right: 0;
    font-size: .8rem;
    margin-top: .3rem;
  }
  .newcard_contents {
    padding: 10vw 4vw;
  }
  .newcard-ttl {
    font-size: 5vw!important;
  }
  .newcard {
    min-width: 550px;
  }
  .newcard .newcard-item th {
    font-size: 3.5vw;
    padding: 1.5vw;
  }
  .newcard .standard th,
  .newcard .gold th,
  .newcard .vip th {
    padding: 2vw;
  }
  .point_cs a {
    font-size: 3vw;
  }
  .text_newcard {
    text-align: left;
  }
}

@media screen and (max-width: 589px) {
    .table-scroll-note {
        display: block;
        margin-top: 4vw;
        text-align: center;
        font-size: 14px;
        position: relative;
        background-image: url(/images/guide/icon_scroll-arrow.gif), url(/images/guide/icon_scroll-arrow.gif);
        background-size: 20px auto, 20px auto;
        background-position: 10% center, 90% center;
        background-repeat: no-repeat, no-repeat;
    }
}

/* --------------------
PCへmedia制限が必要なもの
-------------------- */
@media screen and (min-width: 768px) {
  .is-onlyTab {
    display: none;
  }
}
@media screen and (min-width: 431px) {
  .is-onlySp,
  .is-onlySP {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .cosme {
    margin: 0 -2rem;
  }
}
@media screen and (max-width: 1100px) {
  .p-category-top__ranking-content__heading .c-heading-h4 {
    flex-direction: row;
  }
}
@media screen and (max-width: 979px) {
  .cosmetop-ranking .p-category-top__ranking-content__body {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media screen and (max-width: 768px) {
  /* --------------------
  〜768px
  PCからの差分のみを記載してください
  -------------------- */
  .l-category .u-wrap {
    padding: 0;
  }
  /* ----------------------
  商品リスト_tab
  ---------------------- */
  .cosme .product-list {
    max-width: 100%;
    padding: 0 32px;
  }
  .cosme .product-item__name {
    font-size: 16px;
  }
  /* ----------------------
  丸画像リスト_tab
  ---------------------- */
  .cosme .circle-image-list {
    max-width: 100%;
    padding: 0 32px;
  }
  /* --------------------
  ページ上部インフォメーション_tab
  -------------------- */
  .pagetop-information .is-sp {
    display: inline;
  }
  .pagetop-information__text {
    font-size: 18px;
    text-align: center;
  }
  .pagetop-information__large {
    font-size: 24px;
  }
  .pagetop-information__button {
    padding: 4px 32px 4px 24px;
  }
  /* --------------------
  注目トピックス_tab
  -------------------- */
  /* UV特集_tab */
  .cosme .uv-block {
    background-image: linear-gradient(-85deg, #ecf5fa 0%, #ecf5fa calc(50% - 24px), #fffef2 calc(50% - 24px));
  }
  .cosme .uv-section {
    padding: 24px 48px;
  }
  .cosme .uv-section--usual {
    padding-left: 32px;
  }
  .cosme .uv-section--outdoor {
    padding-right: 32px;
  }
  .cosme .uv-section-heading__purpose {
    font-size: 18px;
  }
  /* --------------------
  コスメランキング js改変あり
  -------------------- */
  .cosmetop-ranking {
    margin-left: 0;
    margin-right: 0;
  }
  .cosmetop-ranking .c-heading-h4 {
    padding: 0;
  }
  .cosmetop-ranking .goods {
    width: auto !important;
  }
  .cosmetop-ranking__area {
    gap: 0.5rem;
    margin: 1.5rem 0 0;
  }
  .cosmetop-ranking__brand, .cosmetop-ranking__category {
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 2rem 1rem 1.6rem;
    background: #333 url("/g_images/freearea/cosme/ico_arrow-right_white.svg") no-repeat top 50% right 0.5rem/1.5rem auto;
    font-size: 1.6rem;
  }
  .cosmetop-ranking__brand b, .cosmetop-ranking__category b {
    padding: 3px 5px 2px;
    font-size: 1.4rem;
  }
  .nav-brand-list {
    gap: 10px;
  }
  .nav-brand-list__item a {
    padding: 0;
  }
}
/* スマホ対応 */
@media (max-width: 750px) {
  .csmifm {
    padding: 5px;
  }
  .csmtxt_0 {
    display: inline;
  }
  .csmtxt_1 {
    font-size: 1.5rem;
  }
  .csmtxt_2 {
    font-size: 2rem;
  }
  .csmtxt_3 {
    font-size: 1rem;
  }
  .csmtxt_4 {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 600px) {
  .nav-brand-list {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 0 15px;
    border-width: 0 0 1px;
  }
  .brand-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-item__link {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  }
  .brand-item__logo img {
    padding: 5px;
  }
}
@media screen and (max-width: 430px) {
  /* --------------------
  SP
  PC・TBからの差分のみを記載してください
  -------------------- */
  /* --------------------
  SP/TAB出し分け
  -------------------- */
  .is-onlyPC {
    display: none;
  }
  .is-onlyTab {
    display: none;
  }
  /* --------------------
  コスメ
  -------------------- */
  .cosme {
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
  }
  #eventTopFreeArea2Sp .cosme {
    margin: 48px 0;
  }
  .cosme h2 {
    background: none;
    border: 0;
    color: #000;
    box-shadow: none;
  }
  .cosme h2 span {
    float: none;
  }
  .cosme p {
    font-size: 1em;
  }
  /* --------------------
  セクション_sp
  -------------------- */
  /* 見出し */
  .cosme .section-heading {
    margin-bottom: 32px;
    color: #000;
    text-align: center;
    font-weight: 400;
  }
  .cosme .section-heading__en {
    font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
    font-size: 32px;
    line-height: 1;
  }
  .cosme .section-heading__ja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
  }
  .cosme .section-heading__ja::before,
  .cosme .section-heading__ja::after {
    content: "";
    display: block;
    width: 8px;
    height: 1px;
    background: #000;
  }
  /* inner */
  .cosme .section__inner {
    padding: 0;
  }
  /* ----------------------
  商品リスト_sp
  ---------------------- */
  /* 商品リスト 通常 */
  .cosme .product-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -32px;
    padding: 0 16px;
  }
  .cosme .product-item {
    width: calc((100% - 16px) / 2);
    margin: 0 16px 32px 0;
  }
  .cosme .product-item:nth-child(even) {
    margin: 0 16px 32px 0;
  }
  .cosme .product-item:nth-child(even) {
    margin-right: 0;
  }
  .cosme .product-item__link {
    transition: 0.1s;
  }
  .cosme .product-item--spabreast {
    width: 100%;
  }
  .cosme .product-item--spabreast .product-item__link {
    display: flex;
  }
  /* 商品 画像 */
  .cosme .product-item__image {
    margin-bottom: 20px;
    transition: 0.1s;
  }
  .cosme .product-item--spabreast .product-item__image {
    width: 44.4%;
    margin-right: 12px;
  }
  .cosme .product-item__link:hover .product-item__image,
  .cosme .product-item__link:focus .product-item__image {
    opacity: 0.6;
  }
  .cosme .product-item__image img {
    width: 100%;
  }
  /* 商品 詳細(deetail) */
  .cosme .product-item--spabreast .product-item__detail {
    flex: 1;
  }
  .cosme .product-item__head {
    margin-bottom: 12px;
    padding-left: 16px;
    border-left: solid 1px #e0e0e0;
  }
  .cosme .product-item__brand {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600 !important;
  }
  .cosme .product-item__name {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* cosmeのみ */
    transform: translateX(-4px);
  }
  .cosme .product-item-price:not(:last-child) {
    margin-bottom: 12px;
  }
  .cosme .product-item__text {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .cosme .product-item__text--red {
    color: #990a03;
  }
  /* ブランドごと ロゴ画像サイズ調整 */
  .cosme .product-item__brand img {
    height: 20px;
  }
  .cosme .product-item__brand img[alt*=綾花] {
    height: 52px;
  }
  .cosme .product-item__brand img[alt*=アユーラ] {
    height: 48px;
  }
  .cosme .product-item__brand img[alt*=イプサ] {
    height: 42px;
  }
  .cosme .product-item__brand img[alt*=エスト] {
    height: 18px;
  }
  .cosme .product-item__brand img[alt*=イヴサンローラン] {
    height: 20px;
  }
  .cosme .product-item__brand img[alt*=エピステーム] {
    height: 22px;
  }
  .cosme .product-item__brand img[alt*=カネボウ] {
    height: 16px;
  }
  .cosme .product-item__brand img[alt*=クラランス] {
    height: 22px;
  }
  .cosme .product-item__brand img[alt*=コウ] {
    height: 58px;
  }
  .cosme .product-item__brand img[alt*=シスレー] {
    height: 30px;
  }
  .cosme .product-item__brand img[alt*=資生堂] {
    height: 28px;
  }
  .cosme .product-item__brand img[alt*="ジミー チュウ"] {
    height: 17px;
  }
  .cosme .product-item__brand img[alt*=ジョンマスターオーガニック] {
    height: 52px;
  }
  .cosme .product-item__brand img[alt*="シュウ ウエムラ"] {
    height: 22px;
  }
  .cosme .product-item__brand img[alt*=スタイルテーブル] {
    height: 29px;
  }
  .cosme .product-item__brand img[alt*=スパセイロン] {
    height: 63px;
  }
  .cosme .product-item__brand img[alt*=ルナソル] {
    height: 16px;
  }
  .cosme .product-item__brand img[alt*=ちふれ] {
    height: 28px;
  }
  .cosme .product-item__brand img[alt*=ドクターシーラボ] {
    height: 52px;
  }
  .cosme .product-item__brand img[alt*=ドルチェ＆ガッパーナ] {
    height: 26px;
  }
  .cosme .product-item__brand img[alt*=ハイネット] {
    height: 30px;
  }
  .cosme .product-item__brand img[alt*=ハーバー] {
    height: 42px;
  }
  .cosme .product-item__brand img[alt*=ヒカリミライ] {
    height: 58px;
  }
  .cosme .product-item__brand img[alt*=ベアミネラル] {
    height: 16px;
  }
  .cosme .product-item__brand img[alt*=ヘレナルビンスタイン] {
    height: 38px;
  }
  .cosme .product-item__brand img[alt*=ポーネット] {
    height: 56px;
  }
  .cosme .product-item__brand img[alt*="ミキモト コスメティックス"] {
    height: 36px;
  }
  .cosme .product-item__brand img[alt*=山田養蜂場＜化粧品＞] {
    height: 44px;
  }
  .cosme .product-item__brand img[alt*=ランコム] {
    height: 28px;
  }
  .cosme .product-item__brand img[alt*=リオネル] {
    height: 40px;
  }
  .cosme .product-item__brand img[alt*=ランバン] {
    height: 24px;
  }
  .cosme .product-item__brand--image {
    margin-bottom: 8px;
  }
  .cosme .product-item-price {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .cosme .product-item-price__small {
    margin-left: 4px;
    font-size: 12px;
  }
  /* 商品_タグ */
  .cosme .product-item__tags {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0 -8px;
  }
  .cosme .product-item__tag {
    margin: 0 8px 8px 0;
    padding: 6px 12px 4px;
    background: #2c2c2c;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }
  /* ----------------------
  丸画像リスト_sp
  ---------------------- */
  .cosme .circle-image-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 16px;
  }
  .cosme .circle-image-list-item {
    display: flex;
    /* overflow: hidden; */
    align-items: center;
    min-height: 64px;
    margin: 0 3px 3px 0;
  }
  .cosme .circle-image-list-item:nth-child(even) {
    margin-right: 0;
  }
  .cosme .circle-image-list-item::after {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    margin: 0 1px;
    background-color: #e0e0e0;
  }
  .cosme .section--category .circle-image-list-item:nth-child(3n)::after,
  .cosme .section--category .circle-image-list-item:last-child::after {
    display: block;
  }
  .cosme .circle-image-list-item__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding: 4px 8px;
    border-bottom: solid 1px #e0e0e0;
    transition: 0.2s;
  }
  .cosme .circle-image-list-item__inner:hover {
    background-color: #f7f7f7;
    cursor: pointer;
  }
  .cosme .circle-image-list-item__image {
    width: 56px;
    height: 56px;
    margin-right: 8px;
    border-radius: 999px;
    overflow: hidden;
  }
  .cosme .circle-image-list-item__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .cosme .circle-image-list-item__text {
    flex: 1;
  }
  .cosme .circle-image-list-item__icon {
    margin-left: 12px;
  }
  /* 2階層メニュー_sp */
  .cosme .circle-image-list-item .category-childmenu {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    box-shadow: none;
    width: 100vw;
    padding: 0;
    transition: 0s;
  }
  /* .cosme
    .circle-image-list-item:hover
    .category-childmenu {
    opacity: 0;
    pointer-events: none;
  } */
  .cosme .category-childmenu-list {
    width: 100vw;
  }
  .cosme .circle-image-list-item:nth-child(even) .category-childmenu-list {
    transform: translateX(-50vw);
  }
  .cosme .category-childmenu.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  .cosme .category-childmenu:not(.is-active) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* PCでの位置調整をリセット */
  .cosme .section--category .circle-image-list-item:nth-child(3n-1) .category-childmenu {
    left: 0;
  }
  .cosme .section--category .circle-image-list-item:nth-child(3n) .category-childmenu {
    left: 0;
  }
  .cosme .circle-image-list-item .category-childmenu-item {
    width: 100%;
    border-bottom: solid 1px #e0e0e0;
  }
  .cosme .category-childmenu-item__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 12px;
  }
  /* --------------------
  ボタン_sp
  -------------------- */
  /* ナビゲーションボタン */
  /* 商品画像ボタン */
  .cosme .bgimage-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 8px 12px;
    overflow: hidden;
  }
  .cosme .bgimage-btn__text {
    color: #fff;
  }
  .cosme .bgimage-btn__bg {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
  }
  .cosme .bgimage-btn__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.2s;
  }
  .cosme .bgimage-btn:hover .bgimage-btn__bg::after {
    background: rgba(0, 0, 0, 0.3);
  }
  .cosme .bgimage-btn__bg img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  /* 限定品はこちらボタン */
  .cosme .btn-limited {
    display: flex;
    align-items: center;
    height: 96px;
    overflow-y: hidden;
    transition: 0.2s;
  }
  .cosme .btn-limited:hover {
    opacity: 0.6;
  }
  .cosme .btn-limited__image {
    width: 12%;
    height: 100%;
    display: flex;
  }
  .cosme .btn-limited__image img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom 0 left 0;
       object-position: bottom 0 left 0;
  }
  .cosme .btn-limited__text-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 8px 0 2px;
    background: 2c2c2c;
    width: 90%;
  }
  .cosme .btn-limited-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
  }
  .cosme .btn-limited__text-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: translateX(-33%) skew(-45deg);
    width: 50%;
    height: 100%;
    background: #2c2c2c;
  }
  .cosme .btn-limited-text__small {
    font-size: 14px;
  }
  .cosme .btn-limited-text__arrow {
    width: 28px;
  }
  /* --------------------
  矢印付きリンクテキスト_sp
  -------------------- */
  .cosme .arrow-link {
    display: flex;
    align-items: center;
    font-size: 14px;
    text-decoration: underline;
    transition: opacity 0.2s;
  }
  .cosme .arrow-link__icon {
    margin-left: 8px;
  }
  .cosme .arrow-link:hover {
    opacity: 0.6;
  }
  /* --------------------
  注目ワード
  -------------------- */
  .cosme .keywords {
    display: flex;
    margin-bottom: 20px;
    padding: 0 20px;
  }
  .cosme .keywords__heading {
    margin-right: 16px;
    padding-top: 7px;
    font-size: 18px;
    color: #392200;
    font-weight: 700;
    white-space: nowrap;
  }
  .cosme .keyword-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .cosme .keyword-item__link,
  .cosme .keyword-item__link:visited {
    display: block;
    padding: 8px;
    font-size: 14px;
    line-height: 1;
    border: solid 1px #e0e0e0;
    transition: 0.2s;
  }
  .cosme .keyword-item__link:hover {
    background-color: #f7f7f7;
  }
  /* --------------------
  お知らせ_sp
  -------------------- */
  .cosme .info-list {
    margin-bottom: 24px;
  }
  .cosme .info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
  }
  .cosme .info-item-text {
    display: flex;
    align-items: flex-end;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.07em;
    font-weight: 600;
    white-space: nowrap;
  }
  .cosme .info-item-text__large {
    font-size: 18px;
    line-height: 1;
    transform: translateY(1px);
  }
  /* ポイントいつでも5% */
  .cosme .info-item--point {
    background-color: #fffaee;
  }
  .cosme .info-item--point .info-item-text {
    font-size: 14px;
  }
  .cosme .info-item--point .info-item-text__strong {
    color: #990a03;
  }
  .cosme .info-item--point .info-item-text__large {
    margin-left: 4px;
    font-size: 24px;
    color: #990a03;
  }
  /* 送料無料 */
  .cosme .info-item--postage {
    background-color: #000;
  }
  .cosme .info-item--postage .info-item-text {
    color: #fff;
  }
  .cosme .info-item--postage .info-item-text:first-child {
    margin-right: 4px;
  }
  .cosme .info-item--postage .info-item-text__large {
    margin: 0 4px;
  }
  /* --------------------
  タイトル_sp
  -------------------- */
  .cosme .title {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  .cosme .title__text {
    font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
    font-size: 3.5rem;
    line-height: 1;
  }
  /* --------------------
  メインビジュアル_sp
  -------------------- */
  .cosme .mainvisual {
    margin-bottom: 15px;
  }
  .cosme .mv-slider-item__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s;
  }
  .cosme .mv-slider-item__link:hover {
    opacity: 0.6;
  }
  .cosme .mv-slider-item__link img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  /* sliderPro */
  /* --------------------
  キーワード検索_sp
  -------------------- */
  /* --------------------
  ブランド一覧はこちら_sp
  -------------------- */
  /* --------------------
  コスメランキング js改変あり
  -------------------- */
  /* --------------------
  ピックアップブランド
  -------------------- */
  /* --------------------
  ナビゲーション_sp
  -------------------- */
  /* --------------------
  新着商品
  -------------------- */
  /* --------------------
  注目トピックス_sp
  -------------------- */
  /* uv特集_sp */
  /* --------------------
  カテゴリから探す
  -------------------- */
  /* --------------------
  効果から探す
  -------------------- */
  /* --------------------
  ピックアップ商品
  -------------------- */
  /* --------------------
  取り扱いブランド一覧_sp
  -------------------- */
  /* --------------------
  ページ下部リスト_sp
  -------------------- */
}
@media screen and (max-width: 430px) and (min-width: 768px) {
  .cosme .mv-slider {
    max-width: 100vw !important;
  }
}
@media screen and (max-width: 430px) {
  .cosme .sp-buttons {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 12px;
  }
  .cosme .sp-button {
    width: 10px;
    height: 10px;
    margin-right: 12px;
    border: 0;
    background-color: #e0e0e0;
  }
  .cosme .sp-button:last-child {
    margin-right: 0;
  }
  .cosme .sp-selected-button {
    background-color: #828282;
  }
  .search {
    margin-bottom: 0;
  }
  .search-form {
    padding: 0 14px;
  }
  .search-form-submit {
    width: 56px;
  }
  .nav-brand {
    margin: 10px 14px 20px;
    padding: 0;
  }
  .nav-brand__box {
    height: 100px;
    background: linear-gradient(45deg, #ff796f, #a3ccff);
  }
  a.nav-brand-button {
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px 42px 8px 30px;
    font-size: 14px;
  }
  a.nav-brand-button::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    margin: auto 15px auto auto;
  }
  .cosmetop-ranking {
    margin: 48px -2rem 0;
    padding: 0;
  }
  .cosmetop-ranking .c-heading-h4 {
    margin: 0 1.5rem 15px;
    font-size: 14px;
  }
  .cosmetop-ranking .p-category-top__ranking-content__body {
    grid-template-columns: repeat(5, 55.5555555556%);
    overflow-x: auto;
    padding: 0 1.5rem;
  }
  .cosmetop-ranking .goods {
    width: auto !important;
  }
  .cosmetop-ranking__more {
    font-size: 12px;
  }
  .cosmetop-ranking__area {
    gap: 0.5rem;
    margin: 1.5rem 1.5rem 0;
  }
  .cosme .section--pickup-brand {
    margin-bottom: 48px;
  }
  .cosme .section--pickup-brand .section__inner {
    padding: 0;
  }
  .cosme .pickupbrand-box {
    padding: 16px;
    background-color: #f7f7f7;
  }
  .cosme .pickupbrand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
  }
  .cosme .navigation {
    margin-bottom: 48px;
  }
  .cosme .navigation-button-list {
    padding: 6vw 2vw 0;
  }
  .cosme .navigation-button {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 80px;
    padding: 12px 8px;
    background-color: #f6f6f6;
    transition: 0.2s;
  }
  .cosme .navigation-button:hover {
    background-color: #e9e9e9;
  }
  .cosme .navigation-button__text {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .cosme .navigation-button__en {
    font-family: "Montserrat", YuGothic, "Yu Gothic", sans-serif;
    font-size: 20px;
  }
  .cosme .navigation-button__ja {
    font-size: 12px;
    color: #808080;
  }
  .cosme .navigation-button__icon {
    width: 12px;
    height: 12px;
  }
  .cosme .section--new {
    margin-bottom: 56px;
  }
  .cosme .section--topics {
    margin-bottom: 56px;
  }
  .cosme .topics-item {
    padding: 0 16px;
  }
  .cosme .topics-item:not(:last-child) {
    margin-bottom: 16px;
  }
  .cosme .topics-item--half {
    width: calc((100% - 16px) / 2);
  }
  .cosme .topics-item__link {
    transition: 0.2s;
  }
  .cosme .topics-item__link:hover {
    opacity: 0.6;
  }
  .cosme .topics-section-lead {
    padding: 0 40px;
  }
  .cosme .topics-section-lead__text {
    font-size: 12px;
  }
  .cosme .topics-section--uv .topics-section-lead__text::before {
    transform: skew(-20deg) translateX(20px);
  }
  .cosme .topics-section--uv .topics-section-lead__text::after {
    transform: skew(-20deg) translateX(-20px);
  }
  .cosme .topics-section--uv .topics-section-lead__text .is-pc {
    display: none;
  }
  .cosme .topics-section--uv .topics-section-lead__text .is-sp {
    display: inline;
  }
  .cosme .uv-block {
    background-image: linear-gradient(8deg, #ecf5fa 0%, #ecf5fa calc(50% + 16px), #fffef2 calc(50% + 16px));
  }
  .cosme .uv-block__contents {
    flex-direction: column;
  }
  .cosme .uv-section {
    padding: 48px 16px;
  }
  .cosme .uv-section--usual {
    padding-bottom: 32px;
  }
  .cosme .uv-section--outdoor {
    padding-top: 32px;
  }
  .cosme .uv-section .product-item {
    width: calc((100% - 16px) / 2);
  }
  .cosme .section--category {
    margin-bottom: 56px;
  }
  .cosme .section--category .circle-image-list-item {
    width: calc((100% - 3px) / 2);
  }
  .cosme .section--category .circle-image-list-item:nth-child(even)::after,
  .cosme .section--category .circle-image-list-item:last-child::after {
    display: none;
  }
  .cosme .section--category .section__inner {
    padding: 0;
  }
  .cosme .section--efficacy {
    margin-bottom: 56px;
  }
  .cosme .section--efficacy .circle-image-list-item {
    width: calc((100% - 3px) / 2);
  }
  .cosme .section--efficacy .section__inner {
    padding: 0;
  }
  .cosme .section--efficacy .circle-image-list-item:nth-child(even)::after,
  .cosme .section--efficacy .circle-image-list-item:last-child::after {
    display: none;
  }
  .cosme .section--pickup-items {
    margin-bottom: 56px;
  }
  .brand-list {
    gap: 6px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .cosme .footer-lists-section {
    padding: 0 16px;
  }
  .cosme .footer-lists-section:not(:last-child) {
    margin-bottom: 40px;
  }
  .cosme .footer-lists-section__heading {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: 18px;
  }
  .cosme .footer-lists__column {
    margin-bottom: 24px;
  }
  .cosme .footer-lists__column:last-child {
    margin-bottom: 0;
  }
  .cosme .footer-list-block {
    margin-bottom: 24px;
  }
  .cosme .footer-list-block:last-child {
    margin-bottom: 0;
  }
  .cosme .footer-list-block__heading {
    margin-bottom: 12px;
    padding: 8px;
    font-weight: 700;
    background-color: #f6f6f6;
  }
  .cosme .footer-lists__wrap {
    display: block;
    max-width: 100%;
  }
  .cosme .footer-lists__column {
    width: 100%;
  }
  .cosme .footer-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -16px;
  }
  .cosme .footer-list-item {
    width: calc((100% - 32px) / 3);
    margin: 0 16px 16px 0;
  }
  .cosme .footer-list-item:nth-child(3n) {
    margin-right: 0;
  }
  .cosme .footer-list-item__link {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px;
    font-size: 14px;
    transition: 0.2s;
  }
  .cosme .footer-list-item__link:hover {
    background-color: #f7f7f7;
  }
  .cosme .footer-list-item__link::after {
    content: "";
    display: block;
    width: 12px;
    min-width: 12px;
    height: 12px;
    padding-top: 2px;
    background: url("/g_images/freearea/cosme/ico_arrow-right_black.svg") no-repeat center/contain;
    transform: transateY(3px);
  }
}
@media screen and (max-width: 374px) {
  .cosme {
    margin: 0 -1rem;
  }
  .cosmetop-ranking {
    margin-right: -1rem;
    margin-left: -1rem;
  }
}/*# sourceMappingURL=cosme-top.css.map */