/* カスタマイズ用CSS */

.ec-layoutRole {
  background: transparent !important;
}

/* 背景を薄く */
#spp-bg {
  opacity: 0.2;
  animation: bgDrift 30s ease-in-out infinite alternate;
}

/* ゆっくり不規則に動く */
@keyframes bgDrift {
  0%   { background-position: 0px 0px; }
  25%  { background-position: 80px 40px; }
  50%  { background-position: 30px 100px; }
  75%  { background-position: 120px 60px; }
  100% { background-position: 50px 130px; }
}

/* ナビ白帯を透明に */
.ec-headerNaviRole,
.ec-categoryNaviRole,
.ec-headerRole {
  background: transparent !important;
}

/* ナビメニューの白帯を透明に */
.ec-itemNav__nav li a,
.ec-itemNav__nav li:hover > a,
.ec-itemNav__nav li.active > a {
  background: transparent !important;
  border-bottom: none !important;
}
.ec-itemNav__nav li ul li a {
  background: rgba(255,255,255,0.85) !important;
}

/* VIEW MORE に白背景 */
.ec-shelfRole .ec-shelfGrid + * a,
.ec-moreLine {
  background: #fff !important;
  padding: 10px 30px !important;
}

/* ドロワーメニュー内は黒背景を復元 */
.ec-drawerRole .ec-itemNav__nav li a,
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a,
.ec-drawerRoleClose,
.ec-drawerRole {
  background: #deb887 !important;
}
.ec-drawerRole .ec-cartNavi,
.ec-drawerRole li a {
  background: #deb887 !important;
  color: #fff !important;
}

/* ドロワー下部メニュー（カート・マイページ等）も同色 */
.ec-drawerRole .ec-drawerRoleClose,
.ec-drawerRole__nav,
.ec-drawerRole__nav li,
.ec-drawerRole__nav li a,
.ec-drawerRole__navUser,
.ec-drawerRole__navUser li a,
.ec-drawerRoleClose {
  background: #deb887 !important;
  color: #fff !important;
}

/* ドロワー全体の黒背景を変更 */
.ec-drawerRole {
  background: #deb887 !important;
}
/* 全ての商品セレクトボックス周りも */
.ec-drawerRole .ec-headerSearchArea,
.ec-drawerRole .ec-headerSearch {
  background: #c9a06a !important;
}
.ec-drawerRole .ec-headerSearch select {
  background: #c9a06a !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* カートを見る・マイページ等の黒エリア */
.ec-drawerRole .ec-headerLinkArea {
  background: #deb887 !important;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.3) !important;
}

/* 検索エリアは白背景 */
.ec-drawerRole .ec-headerSearch {
  background: #fff !important;
}
.ec-drawerRole .ec-headerSearchArea {
  background: #fff !important;
}
/* セレクトボックスだけ色付き */
.ec-drawerRole .ec-headerSearch select.category_id {
  background: #deb887 !important;
  color: #fff !important;
  border-color: #deb887 !important;
}

/* 商品画像部分だけ白背景 */
.ec-shelfGrid__item,
.ec-shelfGrid__item a,
.ec-productRole,
.spp-product-card,
.spp-top-grid__item {
  background: transparent !important;
}
.ec-shelfGrid__item-image,
.spp-product-card__img-wrap {
  background: #fff !important;
}
/* 数量入力は白 */
.ec-numberInput input,
.ec-input input[type="number"],
input[type="number"] {
  background: #fff !important;
}

/* 商品詳細 画像エリア白背景 */
.ec-sliderItemRole .item_visual { background: #fff !important; }
.ec-sliderItemRole .slick-slider { background: #fff !important; }
.ec-sliderItemRole .slick-list { background: #fff !important; }
.ec-sliderItemRole .slick-track { background: #fff !important; }
.ec-sliderItemRole .slick-slide { background: #fff !important; }
.ec-sliderItemRole .slick-slide > div { background: #fff !important; }
.ec-sliderItemRole .slide-item { background: #fff !important; display: block !important; }

/* 帯と商品画像の間にスペース */
.ec-layoutRole__contents,
.ec-productRole,
.ec-shelfRole {
  margin-top: 20px !important;
}

/* sharmoPlas ロゴに細い黒縁 */
.ec-headerTitle__title span,
.ec-headerTitle__title a,
.ec-footerTitle__logo {
  -webkit-text-stroke: 0.4px #333;
  text-stroke: 0.4px #333;
}

/* フッター背景色 */
.ec-footerRole {
  background: #d2b48c !important;
}

/* フッターの区切り線を細く */
.ec-footerNavi .ec-footerNavi__link a {
  border-bottom: 0.5px solid rgba(255,255,255,0.3) !important;
}
.ec-footerRole {
  border-top: 0.5px solid rgba(255,255,255,0.3) !important;
}

/* ボタンを楕円形に */
.ec-blockBtn,
.ec-blockBtn--action,
.ec-blockBtn--cancel,
.ec-blockBtn--warning,
.ec-inlineBtn,
.ec-inlineBtn--action,
.ec-inlineBtn--cancel,
button[class*='btn'],
input[type='submit'] {
  border-radius: 999px !important;
}

/* 赤系ボタンを#ff7f50（コーラル）に */
.ec-blockBtn--action,
.ec-inlineBtn--action,
.add-cart {
  background-color: #ff7f50 !important;
  border-color: #ff7f50 !important;
}
.ec-blockBtn--action:hover,
.ec-inlineBtn--action:hover,
.add-cart:hover {
  background-color: #e86a3a !important;
  border-color: #e86a3a !important;
}

/* カートポップアップ背景 */
.ec-cartNaviIsset {
  background: #faf0e6 !important;
}

/* sharmoPlas フォント適用 */
.ec-headerTitle__title span,
.ec-headerTitle__title a,
.ec-footerTitle__logo,
.ec-footerTitle__logo a {
  font-family: 'Cormorant Garamond', 'Hiragino Mincho ProN', serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
}

/* フッターのsharmoPlas 金色グラデーション */
.ec-footerTitle__logo a {
  background: linear-gradient(135deg, #c8970a, #f5d020, #e8b800, #c8970a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
  font-size: 1.8rem !important;
}

/* sharmoPlas さらに太く見せる */
.ec-headerTitle__title span,
.ec-footerTitle__logo a {
  -webkit-text-stroke: 1.5px currentColor !important;
  paint-order: stroke fill !important;
}

/* text-stroke削除・Playfair Display適用 */
.ec-headerTitle__title span,
.ec-footerTitle__logo a {
  -webkit-text-stroke: 0 !important;
  font-family: 'Playfair Display', 'Noto Serif JP', serif !important;
  font-weight: 900 !important;
}

/* 黒淵 少し太く */
.ec-headerTitle__title span,
.ec-footerTitle__logo a {
  -webkit-text-stroke: 0.6px #333 !important;
}

/* Didotフォント適用 */
.ec-headerTitle__title span,
.ec-footerTitle__logo a {
  font-family: 'Didot', 'Didot LT STD', 'Bodoni Moda', 'Playfair Display', 'Noto Serif JP', serif !important;
}

/* モバイル時 sharmoPlas テキストを大きく */
@media (max-width: 767px) {
  .ec-headerTitle__title span {
    font-size: 2rem !important;
  }
  .ec-headerTitle__title a > span {
    font-size: 2rem !important;
  }
}

/* ロゴ画像サイズ調整 */
.spp-logo-img {
  height: 50px;
  width: auto;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .spp-logo-img {
    height: 44px;
  }
  .ec-headerTitle__title span {
    font-size: 2.2rem !important;
    line-height: 1 !important;
  }
}

/* モバイル sharmoPlas サイズ修正 */
@media (max-width: 767px) {
  .spp-logo-img {
    height: 38px !important;
  }
  .ec-headerTitle__title span {
    font-size: 1.45rem !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
}

/* PC時 sharmoPlas 元のサイズに戻す */
@media (min-width: 768px) {
  .spp-logo-img {
    height: 50px !important;
  }
  .ec-headerTitle__title span {
    font-size: 1.8rem !important;
    white-space: nowrap !important;
  }
}

/* PC sharmoPlas 少し大きく */
@media (min-width: 768px) {
  .ec-headerTitle__title span {
    font-size: 2.4rem !important;
  }
}

/* サロン認証バー */
.spp-auth-bar {
  background: #ffb6c1;
  color: #5a3040;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: nowrap;
  gap: 8px;
}
.spp-auth-bar > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spp-auth-bar > div:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* モバイル時は縦並び */
@media (max-width: 767px) {
  .spp-auth-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .spp-auth-bar > div:first-child {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .spp-auth-bar > div:last-child {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
}

@media (max-width:767px) {
}

@media (max-width:767px) {
}

@media (max-width:767px) {
}

/* text-stroke 細く */
.ec-headerTitle__title span,
.ec-footerTitle__logo a {
  -webkit-text-stroke: 0.3px #333 !important;
}